<template>
    <div>
        <!-- 占位层 -->
        <div class="space"></div>
        <div class="header-bar">
            <div class="header-icon">
                <img src="@/assets/logo_pure.png" alt="LOGO">
                <h1>Coc Searcher</h1>
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "HeaderBar",
    }
</script>

<style lang="scss" scoped>

    @import "~@/styles/global.scss";

    .space {
        height: $bar-width - 5px;
    }

    .header-bar {
        height: $bar-height;
        background-color: #f8f8f8;
        box-shadow: 0 2px 2px #eeeeee;
        -webkit-app-region: drag;
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;

        .header-icon {
            margin-left: $bar-width;

            @media screen and #{$small-size}{
                margin-left: 0;
                text-align: center;
            }

            img {
                cursor: pointer;
                $img-height: $bar-height - 25px;
                width: $img-height;
                height: $img-height;
                float: left;
                margin: 12px 20px;

                @media screen and #{$small-size}{
                    float: none;
                }
            }

            h1 {
                line-height: $bar-height;
                margin-left: 10px;
                font-size: 23px;
                font-weight: 300;
                color: $text-green;

                @media screen and #{$small-size}{
                    visibility: hidden;
                }
            }
        }
    }
</style>
